<template>
  <div class="listTop">
    <div v-for="(v,i) in str" :key="i" @click="fun(i)">
        <img :src="v.picUrl" alt="">
        <p>{{v.pname}}</p>
    </div>

  </div>
</template>

<script>
     import {moneyList} from "@/apis/money";
export default {
    data(){
    return {
      str:[]
    }
  },
      created(){
        moneyList().then((ok)=>{
          console.log(ok.data.data)
          this.str=ok.data.data;
        })

      },
      methods:{
        fun(i){
          switch(i){
            case 0:this.$router.push("/baoxian");
            break;
            case 1:this.$router.push("/chuguo");
            break;
            case 2:this.$router.push("/cun");
            break;
            case 3:this.$router.push("/touZi");
            break;
            case 4:this.$router.push("/licai");
            break;


          }
        }
      }
}
</script>

<style lang="scss" scoped>
    .listTop {
        width: 100%;
        height: 2.2rem;
        // background: #999;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        margin-bottom: .2rem;
    }
    .listTop>div {
        width: 20%;
        height: .5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: .27rem;
            margin-bottom: .1rem;
        }
        p {
            font-size: .14rem;
        }
    }

</style>